<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script>
<div id="root">
	<div id="v-model-example"> 
		<p>{{ message }}</p> 
		<my-input label="Message" v-model="message"></my-input> 
	</div> 
</div>
<script>
Vue.component('my-input', {
	template: '<div class="form-group"><label v-bind:for="randomId">{{ label }}:</label><input v-bind:id="randomId" v-bind:value="value" v-on:input="onInput"></div>',
	props: ['value', 'label'],
	data: function () {
		return {
			randomId: 'input-' + Math.random()
		}
	},
	methods: {
		onInput: function (event) {//当输入框输入时触发
			console.log(event.target);//input元素
			console.log(event.target.value);//input框的内容
			this.$emit('input', event.target.value);
		}
	},
})
new Vue({
	el: '#v-model-example',
	data: {
		message: 'hello' 
	},
})	
</script>	
</body>
</html>